import React, { Component } from "react";

class Lifetwo extends Component {
	//创建ref容器
	inputvalue = React.createRef();
	div = React.createRef();

	//状态
	state = {
		arr: ["二十大", "html", "css", "js"],
	};

	//方法
	getdata = () => {
		let newvalue = this.inputvalue.current.value;
		this.setState({
			arr: [...this.state.arr, newvalue],
		});
		//清空input value
		this.inputvalue.current.value = "";
	};

	//  componentDidUpdate  组件完成更新后执行  操作dom
	componentDidUpdate() {
		console.log("componentDidUpdate -  -- 组件完成更新后执行");
		this.div.current.scrollTop = this.div.current.scrollHeight;
	}

	render() {
		return (
			<div>
				<h1>componentDidUpdate</h1>
				<input ref={this.inputvalue} type="text" />
				<button onClick={this.getdata}>点击</button>
				<div
					ref={this.div}
					style={{
						width: 300,
						height: "150px",
						border: "1px solid grey",
						overflow: "auto",
					}}
				>
					<ul>
						{this.state.arr.map((item, index) => {
							return <li key={index}>{item}</li>;
						})}
					</ul>
				</div>
			</div>
		);
	}
}

export default Lifetwo;
